<template>
  <a-card class="card" :bodyStyle="bodyStyle">
    <a-row type="flex" justify="space-between">
      <a-col>
        <p class="title">{{ title }}</p>
      </a-col>
      <a-col>
        <slot name="cardBtn"></slot>
        <a-button style="margin-right:10px" v-if="title == '卫生保健'" size="small" type="primary" @click="handleClick">体检表</a-button>
        <a-button size="small" type="primary" @click="viewDetail" v-if="title != '电量预警消息'">
          <span>查看详情</span>
          <a-icon type="caret-right" />
        </a-button>
      </a-col>
    </a-row>
    <slot name="cardMain"></slot>
  </a-card>
</template>
<script>
export default {
  name: 'card',
  props:["title","routerUrl"],
  data() {
    return {
      bodyStyle:{ padding: '15px' },
    }
  },
  methods:{
    viewDetail(){
      if (this.routerUrl) {
        this.$router.push(this.routerUrl)
      }else{
        this.$message.warning("功能暂未开发");
      }
    },
    handleClick() {
      this.$router.push('/health/skBmiCard');
    }
  }
}
</script>
<style scoped>
.card{
  min-height: 252px;
}
.title{
  margin-bottom: 0;
  line-height: 32px;
  color: #999;
  font-size: 16px;
}

</style>
